<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }
        
        .navbar-brand {
            padding: 10px 15px;
        }
        
        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }
        
        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }
        
        #my-table th {
            text-align: center;
        }
        
        #my-table td {
            text-align: center;
            line-height: 80px;
            padding: 0;
            padding: 10px;
        }
        
        td img {
            width: 80px;
            height: 80px;
        }
        
        .username {
            font-weight: 900;
            color: hotpink;
            background-color: yellowgreen;
        }
        
        .pagination {
            margin: 0px;
            padding: 0px;
            font-size: 0;
            line-height: 1;
        }
        
        .pagination li {
            display: inline-block;
            font-size: 14px;
        }
        
        .mp15 {
            margin-top: 15px;
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .table-bordered>thead>tr>td,
        .table-bordered>thead>tr>th {
            border-bottom-width: 1px;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <nav class="navbar  navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            <div class="row">
                                <div class="col-md-6 page-title">英雄列表</div>
                                <div class="col-md-6 text-right">当前位置：首页</div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <!-- action 不写 就是当前页面 method 不写 就是 get -->
                            <div class="row">
                                <div class="col-md-9">
                                    <!--<form class="form-inline">
                      <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount"
                          >Amount (in dollars)</label
                        >
                        <div class="input-group">
                          <div class="input-group-addon">英雄姓名</div>
                          <input
                            type="text"
                            value=""
                            class="form-control"
                            name="search"
                            placeholder="请输入查询内容"
                          />
                        </div>
                      </div>
                      <button type="submit" class="btn btn-default">查找</button>
                    
                    </form>-->
                                </div>
                                <div class="col-md-3">
                                    <a href="./add.html" class="btn btn-success pull-right">新增</a>
                                </div>

                            </div>

                            <table id="my-table" class="table table-bordered mp15">
                                <thead>
                                    <tr>
                                        <th width="25%">头像</th>
                                        <th width="25%">姓名</th>
                                        <th width="25%">技能</th>
                                        <th width="25%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><img src="./lib/img/盖伦.png" alt="" /></td>
                                        <td>盖伦</td>
                                        <td>躲草丛</td>
                                        <td>
                                            <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                                            <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><img src="./lib/img/盖伦.png" alt="" /></td>
                                        <td>盖伦</td>
                                        <td>躲草丛</td>
                                        <td>
                                            <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                                            <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>

    <script src="lib/js/template-web.js"></script>
    <script id="heroTemp" type="text/html">
        {{each data v}}
        <tr>
            <td><img src="{{v.icon}}" alt=""></td>
            <td>{{v.name}}</td>
            <td>{{v.skill}}</td>
            <td>
                <!-- 根据id来进行页面传输数据 -->
                <!-- 方法1 -->
                <!-- <button onclick="location.href='./edit.html?id={{v.id}}'" class="btn btn-primary">编辑</button> -->
                <!-- 方法2 代码在280行-->
                <button data-id="{{v.id}}" class="btn btn-primary btn-edit">编辑</button>
                <button data-id="{{v.id}}" class="btn btn-danger btn-delete">删除</button>
            </td>
        </tr>
        {{/each}}
    </script>

    <script>
        $(function() {
            //显示所有英雄思路:
            //一进到首页(index.html)就发送ajax请求,获取到所有的英雄. 
            function getData() {
                $.ajax({
                    type: 'get',
                    url: "http://localhost:4399/hero/all",
                    success: function(backData) {
                        console.log(backData);
                        //成功拿到数据
                        if (backData.code == 200) {
                            //通过模板引擎 把所有的英雄 渲染到页面上
                            let heroRes = template('heroTemp', backData);
                            $('tbody').html(heroRes)
                        }
                    }
                });
            }
            getData();


            //二:删除
            //1.给每一个删除按钮设置一个点击事件
            //  动态生成的tr,所以tr中的删除按钮的点击事件要用委托注册. 
            $('tbody').on('click', '.btn-delete', function() {
                //把当前点击的这个删除按钮用that来保存起来. 
                // console.log(this);
                // let _this = $(this);
                if (confirm('你确定删除吗？')) {
                    //2.提示一下是否真的要删除
                    //3.获取一下当前删除的这一条数据的id
                    let heroId = $(this).attr('data-id');
                    // console.log(heroId);
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:4399/hero/delete',
                        data: {
                            id: heroId
                        },
                        success: function(backData) {
                            console.log(backData);
                            if (backData.code == 204) {
                                // 删除方法一：
                                alert('删除成功');
                                //重新加载页面：
                                // 方法一：
                                // window.location.reload();
                                //做法二:重新发送ajax请求,渲染数据
                                getData();

                                //删除成功做法二:把当前删除的这一行给移除.
                                // _this.parent().parent().remove();
                            }
                        }

                    })
                }

            });

            // 给编辑按钮添加注册事件
            $('tbody').on('click', '.btn-edit', function() {
                let heroName = $(this).attr('data-id');
                window.location.href = './edit.html?id=' + heroName;
            })
        })
    </script>
</body>

</html>